<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <title>同城购</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            html{ width: 100%; height: 100%;}
            body {
                width: 100%;
                height:100%;
                overflow-x: hidden;
                font-family: "微软雅黑";
                background: #fff;
                font-size: 1em;
                padding-bottom: 3.875em;
                background: url(../img/denglu_bg.jpg) no-repeat;
                background-size: 100% 100%;
            }
            
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-weight: normal;
                margin: 0;
            }
            
            p {
                margin: 0;
                text-indent: 1.25em;
                background: #fff;
                padding: 0.625em 0;
                font-size: 1em;
                line-height: 1em;
                padding-top: 1.25em;
                color: #333;
            }
            
            input{ background: none; border: 1px solid;}
            input[type=text]{  color:#a3384d; height: 2.5em; line-height:2.5em; text-indent:1em; padding:0; margin:0; position:absolute; top:0; height:100%;   width:100%;font-size: 1em; background: url(../img/btn_bg.png) no-repeat; background-size:100% 100%; border: none;  }
            input[type=password]{ color:#a3384d;  height: 2.5em; line-height:2.5em; text-indent:1em; font-size:1em; padding:0; margin:0; position:absolute; top:0;  width:100%; background: url(../img/btn_bg.png) no-repeat; background-size:100% 100%; border: none; }
            input[type=file]{ border-color: #ccc; display: none;}
            input[type=button]{ border-color: #ccc; display: none;}
            input[type="button"]{ background: none;}
            p,span{ font-size: 0.8em; color: #999;}
            label{ display:block; position:relative; color: #666; width: 100%;  height: 2.5em; line-height: 2.5em;}
            label input{ display:inline; width: auto;}
            .login{
                width:70%;
                margin: 0 auto;
            }
            .login p{
                width: 100%;
                margin: 0 auto;
                margin-top: 15%;
                background: #ff3366;
                color: #fff;
                border-radius: 0.2em;
                text-align: center;
                line-height: 2em;
                text-indent: 0;
                padding: 0.4em 0;
            }
            .login a{
                display: block;
                margin: 0 auto;
                color: #fff;
                margin-top: 0.8em;
                font-size: 0.8em;
                line-height: 1.2em;
                text-align: right;
            }
            .login label:first-child{  margin-bottom:1em;}
            .logo{ margin-top: 15%;}
            .logo img{ display: block; margin: 0 auto;}
            .logo img:first-child{ font-size:1em; width: 22%; margin-bottom: 1em;}
            .logo img:last-child{ font-size:1em; width: 50%; margin-bottom: 3em;}
            #zhuce{ float: left; color: #666;}
        </style>
    </head>

    <body>
        <header>
            <a><span class="leftleft"></span></a>
            <h1 id="title">登录</h1>
        </header>
        <section class="logo">
            <img src="../img/denglu_logo.png" />
            <img src="../img/biaoyu.png" />
        </section>
        <section class="login">
            <form id="loginform">
                <div>
                    <label><input type="text" class="username" name="userName" value="" placeholder="请输入您的帐号" autofocus /></label>
                    <label><input type="password" class="password" name="userPwd" value=""  placeholder="请输入您的密码" /></label>
                </div>
                <div>
                    <p class="btn">登录</p>
                    <a id="zhuce" onclick="openUrl('register.html','register')">没有帐号？立即注册</a>
                    <a onclick="openUrl('backpassword.html','backpassword')">忘记密码？</a>
                </div>
            </form>
        </section>
        <script>
            $(function(){
                $(".btn").click(function(){
                    if(!!!$(".username").val()){
                        alert("用户名不能为空");
                        return false;
                    }
                    if(!!!$(".password").val()){
                        alert("密码不能为空");
                        return false;
                    }
                    //名片添加
                    var param = $("#loginform").serializeJson();
                    appcan.ajax({
                        type:"post",
                        url:host+"/login.json",
                        data:param,
                        dataType:"json",
                        contentType: "application/json",
                        success : function(dataResult) {
                            if(dataResult.status>0){
                                appcan.locStorage.setVal("userId",dataResult.data.userId);
                                appcan.locStorage.setVal("userCardId",(dataResult.data.userCard).id);
                                openUrl("../index.html","index");
                            }else{
                                alert(dataResult.msg);
                            }
                        }
                    })
                })
            })
        </script>
    </body>

</html>